//选择分类---下拉框
initEditor();
axios.get('/my/category/list').then(res=>{
  let {status,data}=res.data;
  let str;
  data.forEach(item=>{
    str+=`<option value='${item.id}'>${item.name}</option>`
  })
  $('#select').append(str);
  let form=layui.form
  form.render('select');
})

//初始的剪裁效果
let $image=$('#image')
let options={
  aspectRatio:400/200,
  preview:'.img-preview'
}
$image.cropper(options);



$('button:contains("选择封面")').click(function () {
  $('#file').trigger('click');
})

$('#file').change(function () {
  if(this.files.length>0){
    let fileObj=this.files[0];
    let url=URL.createObjectURL(fileObj);
    $image.cropper('replace',url)
  }
})
$('#add-form').on('submit', function (e) {
  e.preventDefault();
  // 收集表单数据(必须是FormData)
  var fd = new FormData(this);
  // fd对象中，有content，但是值为空； 根本就没有 图片
  // 1. 获取富文本编辑器里面的内容，并不是追加到fd中，而是更改fd里面的内容
  fd.set('content', tinyMCE.activeEditor.getContent());

  // 2. 剪裁图片，转成 blob 形参（二进制形式或文件对象形式），追加到fd中
  var canvas = $image.cropper('getCroppedCanvas', {
    width: 400,
    height: 280
  });

  // 把canvas图片转成二进制形式
  canvas.toBlob(function (blob) {
    // 追加文件对象到fd中
    fd.append('cover_img', blob);

    // 检查一下，fd对象中，是否取得了接口要求的所有参赛
    // fd.forEach((val, key) => {
    //     console.log(key, val);
    // });
    // return;
    // 发送ajax请求，完成最终的添加
    axios.post(`/my/article/add`, fd).then(res => {
      let { status, message } = res.data;
      if (status === 0) {
        layer.msg(message);
      }
    })
  });
})